<template>
    <div>
		<uni-list>
			<uni-list-item title="账号" :text="account" :showArrow="false"></uni-list-item>
			<uni-list-item title="旧密码" :custom="true">
				<input type="tel" v-model="old_passworld" placeholder="请输入原始密码"  />
			</uni-list-item>
			<uni-list-item title="新密码" :custom="true">
				<input type="tel" v-model="new_passworld" placeholder="请输入新的密码"  />
			</uni-list-item>
			<uni-list-item title="确认密码" :custom="true">
				<input type="tel" v-model="confirm_passworld" placeholder="请再次输入新的密码"  />
			</uni-list-item>
		</uni-list>

        <div class="passworld_alert">
            <p >温馨提示：密码必须至少8个字符，而且同时包含字母和数字。</p>
            <p>忘记旧密码? 请联系公司管理员重置密码</p>
        </div>
        <button class="setting_btn" @click="savemodify">保存</button>
    </div>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'

import { pwd } from '@/utils/tools/validate'

import { changepassworld } from '@/api/setting'
export default {
	name: 'ChangePassworld',
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			title: '修改密码',
			account: '大山的账号',
			old_passworld: '',
			new_passworld: '',
			confirm_passworld: ''
		}
	},
	onLoad(option) {
		this.optin = option
		let userInfo = this.$store.getters.getUser
		this.account = userInfo.nick_name
	},
	methods: {
		savemodify() {
			if (this.old_passworld == '') {
				uni.showToast({
					title: '请输入原始密码',
					icon: 'none'
				})
			} else if (this.new_passworld == '') {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				})
			} else if (pwd.test(this.new_passworld)) {
				uni.showToast({
					title: '密码格式不对，请重新输入',
					icon: 'none'
				})
			} else if (this.confirm_passworld == '') {
				uni.showToast({
					title: '请输入确认密码',
					icon: 'none'
				})
			} else if (this.confirm_passworld != this.new_passworld) {
				uni.showToast({
					title: '两次密码输入的不正确，请重新输入',
					icon: 'none'
				})
			} else {
				let data = {
					old_pw: this.old_passworld,
					new_pw: this.new_passworld,
					cofirm_pw: this.confirm_passworld
				}
				changepassworld(data).then(res => {
					if (res.status === 'success') {
						uni.showToast({
							title: '密码修改成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
}
</script>

<style scoped>
    .passworld_alert{
        font-size: 24px;
        color: #999999;
        margin-top: 38px;
        margin-left: 30px;
    }
    .passworld_alert p{
        line-height: 36px;
    }
    .setting_btn{
        width: 90%;
        height: 90px;
        font-size: 32px;
        color: #3A1B04;
        border: none;
        text-align: center;
        line-height: 90px;
        background: #FFD11A;
        border-radius: 45px;
        margin-left: 5%;
        margin-top: 60px;
    }
</style>
